import React, { useEffect, useState } from 'react';
import axios from 'axios'
import './style.css'
import Tabs from '../../../components/tabs'
import LazyLoadImg from '../../../components/lazyLoadImg'
const Index = () => {
	const [tabs, setTabs] = useState([]);
	const [activeIndex, setActiveIndex] = useState(0)

	const getTabs = () => {
		axios.get('/api/tabs').then(resp => {
			setTabs(resp.data.data)
		})
	}

	useEffect(() => {
		getTabs()
	}, [])

	return (
		<div>
			{
				tabs.length > 0 && <Tabs>
					{
						tabs.map((v, i) => {
							return (
								<Tabs.Tab title={v.title} key={i}>
									{
										tabs[i].children.map((v, i) => {
											return (
												<dl key={i}>
													<dt>
														<LazyLoadImg src={ v.url }></LazyLoadImg>
													</dt>
													<dd>
														<h3>{ v.title }</h3>
													</dd>
												</dl>
											)
										}
									)}
								</Tabs.Tab>
							)
						})
					}
				</Tabs>
			}





			{/* <div className="title">
				{
					tabs.length > 0 && tabs.map((v, i) => {
						return <b key={i} 
							className={ i === activeIndex ? 'active': '' }
							onClick={() => setActiveIndex(i)}
						>{ v.title }</b>
					})
				}
			</div>
			<div className="content">
				{
					tabs.length > 0 && tabs[activeIndex].children.map((v, i) => {
						return (
							<dl key={i}>
								<dt>
									<img src={ v.url } alt="" />
								</dt>
								<dd>
									<h3>{ v.title }</h3>
								</dd>
							</dl>
						)
					})
				}
			</div> */}
		</div>
	);
}

export default Index;
